<template>
  <div>

<!-- <footer></footer> -->
   <div class="center">购物车 </div>
    <table class="center"
      border="1"
      width="700"
      style="border-collapse: collapse">

      <thead>
        <tr>
          <th>
            <!-- <input @click="allcheck" type="checkbox" /> <span>全选</span> -->
            <input   class="ipt" v-model="checkAll" @change="cbaChange" type="checkbox" id="all"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      
      <!-- <tbody>
           <tr>
             <td> 
               <input  type="checkbox" />
             </td>
              <td>123</td>
              <td>123</td>
              <td>
                <button >-</button>
                123
                <button >+</button>
              </td>
               <td>123</td>
               <td><button >删除</button></td>
            </tr>
       </tbody> -->

      <XuanRan v-for="(item,index) in list" :key="index" :item="item" :index="index" :list="list" />
       <!-- <xuan-ran></xuan-ran> -->

       <!-- <div  v-for="(item,index) in list" :key="index"> -->
      <tfoot>
        <tr>
          <!-- <td class="total-price">合计:{{totalprice|curreney}}</td> -->
          <td >     <p>
        合计：
      </p>
          <td colspan="5">
      <span>￥{{ amountAll }}元</span>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
// import XuanRan from './components/XuanRan.vue'
// import XuanRan from '@/components/XuanRan'
import XuanRan from '@/components/XuanRan'
import { mapState,mapGetters} from 'vuex'
// import { mapGetters } from 'vuex'
// import XuanRan from './components/XuanRan.vue'
// import Add from './components/Add.vue'
// import Sub from './components/Sub.vue'
export default {
    computed: {
    ...mapState(['list']),
       ...mapGetters(['checkAll', 'amountAll', 'countAll']),
    checkAll: {
      get() {
        if (this.$store.state.list.every((item) => item.checked)) {
          return true
        } else {
          return false
        }
      },
      set(val) {
        if (this.$store.state.list.every((item) => item.checked)) {
          return val
        } else {
          return val
        }
      },
    },
  },

    methods: {
    cbaChange(e) {
      // console.log(e.target.checked)
      this.$store.commit('cbaChange', e.target.checked)
    },
  },
  components: {  XuanRan},
  data () {
    return {
    }
  }
}
</script>

<style>
.center{
/* text-align: center; */
/* margin-left: 50px; */
}

</style>
